// 排行榜界面视图模块
const RankingView = {
  // 渲染排行榜界面
  render: function(ctx, width, height, highScore) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 绘制背景
    ctx.fillStyle = '#EFF3F6';
    ctx.fillRect(0, 0, width, height);
    
    // 绘制标题
    ctx.fillStyle = '#2C3E50';
    ctx.font = `bold ${24 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('排行榜', width / 2, 80 * scaleFactor);
    
    // 绘制最高分面板
    const panelWidth = width * 0.8;
    const panelHeight = 180 * scaleFactor;
    const panelX = (width - panelWidth) / 2;
    const panelY = 150 * scaleFactor;
    const panelRadius = 15 * scaleFactor;
    
    // 绘制排行榜面板背景
    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
    ctx.beginPath();
    ctx.moveTo(panelX + panelRadius, panelY);
    ctx.lineTo(panelX + panelWidth - panelRadius, panelY);
    ctx.quadraticCurveTo(panelX + panelWidth, panelY, panelX + panelWidth, panelY + panelRadius);
    ctx.lineTo(panelX + panelWidth, panelY + panelHeight - panelRadius);
    ctx.quadraticCurveTo(panelX + panelWidth, panelY + panelHeight, panelX + panelWidth - panelRadius, panelY + panelHeight);
    ctx.lineTo(panelX + panelRadius, panelY + panelHeight);
    ctx.quadraticCurveTo(panelX, panelY + panelHeight, panelX, panelY + panelHeight - panelRadius);
    ctx.lineTo(panelX, panelY + panelRadius);
    ctx.quadraticCurveTo(panelX, panelY, panelX + panelRadius, panelY);
    ctx.closePath();
    ctx.fill();
    
    // 面板阴影
    ctx.shadowColor = 'rgba(0, 0, 0, 0.1)';
    ctx.shadowBlur = 10 * scaleFactor;
    ctx.shadowOffsetY = 5 * scaleFactor;
    
    // 绘制最高分标题
    ctx.fillStyle = '#34495E';
    ctx.font = `${18 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('历史最高分', width / 2, panelY + 50 * scaleFactor);
    
    // 绘制最高分数字
    ctx.fillStyle = '#E74C3C';
    ctx.font = `bold ${48 * scaleFactor}px Arial`;
    ctx.fillText(highScore, width / 2, panelY + 110 * scaleFactor);
    
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;
    
    // 绘制返回按钮
    const btnWidth = 200 * scaleFactor;
    const btnHeight = 45 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    const btnY = panelY + panelHeight + 60 * scaleFactor;
    const btnRadius = 25 * scaleFactor;
    
    // 绘制返回按钮
    ctx.beginPath();
    ctx.moveTo(btnX + btnRadius, btnY);
    ctx.lineTo(btnX + btnWidth - btnRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + btnRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - btnRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - btnRadius, btnY + btnHeight);
    ctx.lineTo(btnX + btnRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - btnRadius);
    ctx.lineTo(btnX, btnY + btnRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + btnRadius, btnY);
    ctx.closePath();
    const gradient = ctx.createLinearGradient(btnX, btnY, btnX + btnWidth, btnY);
    gradient.addColorStop(0, '#4A90E2');
    gradient.addColorStop(1, '#357ABD');
    ctx.fillStyle = gradient;
    ctx.fill();
    
    ctx.fillStyle = 'white';
    ctx.font = `bold ${18 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('返回', width / 2, btnY + btnHeight / 2 + 7 * scaleFactor);
  },
  
  // 检查按钮点击
  checkButtonClick: function(touchX, touchY, width, height) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 检查返回按钮，与render方法使用相同的计算方式
    const btnWidth = 200 * scaleFactor;
    const btnHeight = 45 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    
    // 计算面板位置，与render方法保持一致
    const panelWidth = width * 0.8;
    const panelHeight = 180 * scaleFactor;
    const panelY = 150 * scaleFactor;
    const btnY = panelY + panelHeight + 60 * scaleFactor;
    
    if (touchX >= btnX && touchX <= btnX + btnWidth && 
        touchY >= btnY && touchY <= btnY + btnHeight) {
      return 'back';
    }
    
    return null;
  }
};

module.exports = RankingView;